<template>
<div class="xpage-detail">
  <div class="header-bar custom-dialog">
    <nut-dialog
      :title="state.title"
      :content="state.content"
      v-model:visible="state.visible"
      no-cancel-btn
      @cancel="onCancel"
      @ok="onOk"
    />
    <nut-tabbar @tab-switch="tabSwitch" v-model:visible="activeName">
      <nut-tabbar-item
        :name="item.name"
        :tab-title="item.title"
        v-for="(item, index) in tabbar"
        :key="index"
      ></nut-tabbar-item>
    </nut-tabbar>
  </div>
  <div style="padding-top: 40px">
    <div
      class="xblock-list"
      v-for="(item, index) in state.alertList"
      :key="index"
      @click="changeStatus(index, item)"
    >
      <div class="xblock-cell van-hairline--bottom" @click="sensorClick(item)">
        <div class="xblock-cell__title">
        <div>
            <div class="tips-icon gray" v-if="item.alertRecords"></div>
            <div class="tips-icon" v-else ></div>
            {{ item.alertTitle }}</div>
        </div>
        <!-- <div v-if="item.alertRecords" class="xblock-right">{{ item.updateDate }}</div>
        <nut-badge v-else dot color="linear-gradient(135deg,#fa2c19 0%,#fa6419 100%)">
          <div class="xblock-right">{{ item.updateDate }}</div>
        </nut-badge> -->
      </div>
      <div class="xblock-content">
        {{ item.alertContent }}
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { usePullDownRefresh, useReachBottom } from '@/hooks/life'
import { useDidShow } from '@tarojs/taro'
import { ref, onMounted, reactive } from 'vue'
import { alertListData, saveRead } from '@/services/apis/msg'
const iconEquipment = require('@/assets/icons/icon_equipment.png')
// 预警消息类型，全部可不传
// 设备异常	device_warning
// 数据异常	data_warning
// 墒情预警	sq_warning
// 虫情预警	cq_warning
// 气象预警	qx_warning
const tabbar = ref([
  { title: '全部', name: '1' },
  { title: '墒情预警', name: '2' },
  { title: '虫情预警', name: '3' },
  { title: '气象预警', name: '4' }
])
const activeName = ref('1')
const tabSwitch = (item, index) => {
  state.pageNo = 1
  state.alertList = []
  if (index == 1) {
    state.alertType = ''
  }
  if (index == 2) {
    state.alertType = 'sq_warning'
  }
  if (index == 3) {
    state.alertType = 'cq_warning'
  }
  if (index == 4) {
    state.alertType = 'qx_warning'
  }
  getList()
}
const state = reactive({
  alertList: [],
  pageNo: 1,
  pageSize: 10,
  alertType: '',
  count: 0,
  visible: false,
  title: '',
  content: ''
})
const changeStatus = (index, item) => {
  state.title = item.alertTitle
  state.content = item.alertContent
  var alertsIds = []
  alertsIds.push(item.id)
  saveRead(alertsIds).then(data => {
    state.alertList[index].alertRecords = {}
  })
  state.visible = true
}
const sensorClick = id => {}
useDidShow(() => {
  getList()
})
const getList = () => {
  alertListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize,
    alertType: state.alertType
  }).then(data => {
    state.alertList = [].concat(state.alertList, data.data.list)
    state.count = data.data.count
  })
}
useReachBottom(() => {
  if (state.pageNo * state.pageSize < state.count) {
    state.pageNo++
    getList()
  }
})
usePullDownRefresh(() => {
  state.pageNo = 1
  state.alertList = []
  getList()
})
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
.nut-tabbar {
  height: 40px;
}
.xblock-content {
  font-size: 12px;
  color: #666666;
}
.xblock-list .xblock-cell__title .h5-div {
  padding-left: 10rpx;
  max-width: 600rpx !important;
  height: 60rpx;
  overflow: hidden;
  font-size: 15px;
}
.xblock-list{
    .tips-icon{
        margin-right: 5px;
        float: left;
        width: 8px;
        background: url(../../../assets/icons/user-msg-tip.png) no-repeat left center;
        background-size: 100% auto;
        &.gray{
            background-image: url(../../../assets/icons/user-msg-tip-disabled.png);
        }
    }
}

.nut-tabbar-item {
    position: relative;
    &::after {
        position: absolute;
        content: '';
        left: 50%;
        bottom: 2px;
        transform: translateX(-50%);
        width: 28px;
        height: 2px;
        background: #499D2F;
        border-radius: 1px;
    }
    &.nut-tabbar-item__icon--unactive {
        color: #666;
        &::after{
           opacity: 0;
        }
    }
    .nut-tabbar-item_icon-box_big-word {
        font-size: $font-size-2;
    }
}
.custom-dialog{
    .nut-button{
      padding-top:19px;
      padding-bottom: 19px;
      font-weight: 600;
      font-size: 14px;
    }
    .nut-dialog__footer-ok{
       min-width: 140px;
    }
}
</style>
